<template>
    <div class="album">
        <div class="album-header">
            <div class="back" @click="goBack">返回</div>
        </div>
        <div class="album-name">
            <h3>{{ album_name }}</h3>
        </div>
        <div class="song-list">
            <div v-if="isLoading">
                <!-- 使用loading组件 -->
                <my-loading></my-loading>
            </div>
            <ul v-else>
                <li v-for="(item) in arr" :key="item.id">
                    <router-link
                        :to="{ path: '/detail', query: { song_id: item.song_id, ui: 'album', album_name: item.album_name } }">
                        <div class="left">
                            <div class="img-box"><img v-if="item.song_cover_url" :src="item.song_cover_url" alt="">
                            </div>
                            <div>
                                <h5>{{ item.song_name }}</h5>
                                <div v-if="item.singer_name">
                                    <span>{{ item?.singer_name }} </span> |
                                    <span>{{ item?.category_name }} </span>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <button>
                                <van-icon name="play-circle-o" />
                            </button>
                        </div>
                    </router-link>
                </li>
            </ul>
            <p v-if="arr.length == 0" style="padding: 30px 0px; text-align: center; font-size: 18px; color: #666;">
                {{ message }}
            </p>
        </div>
    </div>
</template>

<script>

// 导入组件
// import { Toast } from 'vant'
// 导入自定义组件
import MyLoading from '../components/MyLoading.vue'


export default {
    // 注册组件
    components: {
        MyLoading,
    },
    data() {
        return {
            arr: [],
            album_name: "",
            isLoading: false,
            message: "正在加载..."
        }
    },
    async created() {
        let album_id = this.$route.query.album_id;
        let album_name = this.$route.query.album_name;
        console.log(album_id);
        console.log(album_name);

        if (album_id) {
            this.albumSongFn(album_id)
            this.album_name = album_name;
        }
    },
    methods: {
        // 返回上一级历史
        goBack() {
            this.$router.go(-1);
        },
        async albumSongFn(value) {
            // console.log({keyword: value})
            // 请求之前 显示loading
            this.isLoading = true;
            await this.$store.dispatch('music/albumSongFn', { album_id: value });
            this.arr = this.$store.state.music.songs;

            // 请求之后
            setTimeout(() => {
                if (this.arr.length == 0) {
                    this.message = '暂无该专辑歌曲~~'
                }
                // 隐藏loading
                this.isLoading = false;
            }, 500);
        },
    }
}

</script>

<style lang="less" scoped>
@import '../common/less/varible.less';

.album {
    width: 100%;
    padding: 0px 0;

    .album-header {
        font-size: 18px;
        border-bottom: 1px solid #f0f0f0;
        background-color: rgba(0, 0, 0, .15);
        width: 100%;

        .back {
            height: 40px;
            width: 50px;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
            // font-family: Arial, Helvetica, sans-serif;
        }
    }

    .song-list {
        padding: 10px 10px;
    }

    .album-name {
        h3 {
            font-size: 18px;
            padding: 30px;
            // background-color: #f0f0f0;
            text-align: center;
            color: @activeColor;
            box-shadow: 0px 2px 5px #f0f0f0;
        }
    }

    ul {
        padding: 0 15px;
        margin-top: 10px;

        li {
            a {
                display: flex;
                width: 100%;
                justify-content: space-between;
                align-items: center;
                font-family: Arial, Helvetica, sans-serif;
                padding: 10px 0px;
                border-bottom: 1px solid #f0f0f0;

                .left {
                    display: flex;

                    .img-box {
                        width: 80px;
                        margin-right: 10px;

                        img {
                            width: 100%;
                        }
                    }

                    h5 {
                        font-weight: normal;
                        font-size: 18px;
                        line-height: 175%;
                    }

                    div {
                        font-size: 13px;
                        color: #666;

                        i {
                            display: inline-block;
                            width: 12px;
                            height: 8px;
                            margin-right: 4px;
                            background-image: url(../assets/img/index_icon_2x.png);
                            background-size: 166px 97px;
                        }
                    }
                }

                .right {
                    button {
                        background-color: transparent;
                        color: #ccc;
                    }
                }
            }
        }
    }
}
</style>